<template>
  <div class="c-bg-sgray">
    <header class="c-pf c-bg-white c-pz11 c-w100 c-maxw640">
      <new-search-bar @search="startSearch" @cancel="startSearch" :searchText="searchText"></new-search-bar>
      <div class="c-ph24 c-w100">
        <my-small-tabbar @changeTab="changeTab" :tabList="tabList" :tabIndex="tabIndex" :isScroll="true"></my-small-tabbar>
      </div>
    </header>
    <div v-if="list.length" class="c-p c-pz1 c-ph24 c-pt190">
      <section v-for="(item, index) in list" :key="item.prodId" @click="goDetail(item.prodId, index)" class="c-flex-row c-bg-white c-mb20 c-br12 c-ph24 c-pv24">
        <div class="c-ww180 c-hh120 c-p">
          <CoverImg :prodType="item.prodType" coverSizeClass="c-w100 c-h c-text-hidden c-br16" imgClass="c-br16" :coverUrl="$addXossFilter(item.cover)" />
          <div class="c-br8 c-hh28 c-lh30 c-ph6 c-textAlign-c c-translucent-balck60 c-fs18 c-fc-white c-pa c-p-b8 c-p-r8 c-pz9">{{item.prodType == 5 ? subProdTypeMap[item.subProdType] : prodTypeMap[item.prodType]}}</div>
        </div>
        <div class="c-flex-row c-flex-column c-justify-sb c-pl12 c-flex-grow1 c-w0 c-p">
          <!-- 所有模块 name 和 有效期 -->
          <div class="c-text-ellipsis1 c-fs24 c-fc-xblack" :class="item.progressRatio == 1 ? 'c-w74' : ''">{{ item.name }}</div>
          <div class="c-fc-gray c-fs18">学习时长:{{ formateSeconds(item.learningTimes) }}</div>
          <!-- 除公开课、 直播间外的模块 -->
          <div v-if="item.prodType != 61 && item.prodType != 8" class="c-flex-row c-aligni-center">
            <div class="c-fc-gray c-fs18 c-ws-n">{{ item.progressRatio == 0 ? '未开始' : '已学' + (item.progressRatio ? parseInt(item.progressRatio * 100) : 0) + '%' }}</div>
            <div class="c-hh6 c-p c-text-hidden c-ml16 c-flex-grow1 c-w0">
              <div class="c-bg-f2 c-br4 c-w100 c-h"></div>
              <div class="theme-bg c-h c-pa c-p-t0 c-p-l0 c-br4" :style="{ width: item.progressRatio * 100 + '%' }"></div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <loading-status-tem :dataStatus="loadingStatus" :noDataText="'暂无相关记录'"></loading-status-tem>
  </div>
</template>

<script>
import { LOAD_STATUS_ENUM } from '@/utils/constant.js';
import loadingStatusTem from '@/components/templates/common/loadingStatusTem.vue';
import newSearchBar from '@/components/templates/common/newSearchBar.vue';
import CoverImg from '@/components/templates/common/coverImg.vue';
import MySmallTabbar from '@/components/templates/common/MySmallTabbar.vue';
import { utilJs } from '@/utils/common.js';
import { goDetails } from '@/utils/goDetails.js';
const TAB_LIST = [
  {
    title: '全部',
    index: 0
  },
  {
    title: '课程',
    index: 5
  },
  {
    title: '专栏',
    index: 9
  },
  {
    title: '知识套餐',
    index: 61
  },
  {
    title: '资料',
    index: 8
  }
];
const LIMIT = 20;
export default {
  name: 'MyCollection',
  components: {
    loadingStatusTem,
    MySmallTabbar,
    newSearchBar,
    CoverImg
  },
  props: [],
  data() {
    return {
      tabList: TAB_LIST,
      tabIndex: 0,
      searchText: '',
      loadingStatus: LOAD_STATUS_ENUM.NO_MORE_DATA, //显示加载更多LOAD_MORE 加载中 LOADING 没有更多 NO_MORE_DATA
      list: [],
      prodTypeMap: {
        0: '全部',
        9: '专栏',
        61: '知识套餐',
        8: '资料'
      },
      subProdTypeMap: global.prodCourseType
    };
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    changeTab(tabIndex) {
      if (this.tabIndex == tabIndex) {
        return;
      }
      this.tabIndex = tabIndex;
      this._page = 1;
      this.getList();
    },
    startSearch(e) {
      this._page = 1;
      this.searchText = e.searchValue;
      this.getList();
    },
    //将秒转化为时分秒
    formateSeconds: function(time) {
      let secondTime = parseInt(time);
      let min = 0;
      let h = 0;
      let result = '';
      if (secondTime > 60) {
        min = parseInt(secondTime / 60);
        secondTime = parseInt(secondTime % 60);
        if (min > 60) {
          h = parseInt(min / 60);
          min = parseInt(min % 60);
        }
      }
      result = `${h.toString().padStart(2, '0')}:${min.toString().padStart(2, '0')}:${secondTime.toString().padStart(2, '0')}`;
      return result;
    },
    goDetail: function(id, index) {
      let prodType = Number(this.list[index].prodType);
      let courseType = this.list[index].subProdType;
      goDetails(this, prodType, id, '', courseType);
    },
    //分页获取观看记录
    getList() {
      if (this.loadingStatus == LOAD_STATUS_ENUM.LOADING) {
        return;
      }
      this.loadingStatus = LOAD_STATUS_ENUM.LOADING;
      utilJs.getMethod(
        `${global.apiurl}prodCollect/lists?page=${this._page}&limit=${LIMIT}&pType=${this.tabIndex}&search=${this.searchText}`,
        res => {
          if (!res.data) {
            return;
          }
          let resList = res.data || [];
          const { list, loadStatus, page } = utilJs.formatListData(this._page, LIMIT, resList, this.list);
          this.list = list;
          this.loadingStatus = loadStatus;
          this._page = page;
        },
        () => {
          this.loadingStatus = LOAD_STATUS_ENUM.DATA_ERROR;
        }
      );
    },
    initData() {
      this._page = 1;
      this.list = [];
      this.tabIndex = 0;
      this.searchText = '';
      this.getList();
    },
    //分享
    wechatShare: function() {
      let hurl = window.location.href.split('#')[0];
      let shareUrl = hurl + '#' + this.$route.path + '?refereeId=' + localStorage.getItem('userId');
      utilJs.wechatConfig(shareUrl, '我的收藏', '', '', function() {});
    },
    //手机端分享
    appShare: function() {
      let hurl = window.location.href.split('#')[0];
      let shareUrl = hurl + '#' + this.$route.path + '?refereeId=' + localStorage.getItem('userId');
      utilJs.appShareTrue('我的收藏', '', shareUrl, '');
    },
    //下拉加载更多
    windowScrollFunction: function() {
      utilJs.handleLoading(() => {
        if (this.loadingStatus == LOAD_STATUS_ENUM.HAS_MORE_DATA && this.list.length) {
          this.getList();
        }
      });
    }
  },
  activated() {
    setDocumentTitle('我的收藏');
    this.initData();
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<style scoped>
</style>
